<!--
 * @Author: xuzehan h935351619@163.com
 * @Date: 2024-07-23 15:18:20
 * @LastEditors: xuzehan h935351619@163.com
 * @LastEditTime: 2024-11-25 13:58:34
 * @FilePath: \linshi\src\views\ChannelMonitoring\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="LED点阵显示">
        <latticeLED ref='latticeLED'/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="详细列表显示" >
       <latticeList ref='latticeList'/>
      </a-tab-pane>
      <a-tab-pane key="3" tab="信息速率配置" >
       <channel-edit ref="channelEdit" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import channelEdit from './components/channelEdit.vue';
import latticeLED from './components/latticeLED.vue'
import latticeList from './components/latticeList.vue'
export default {
  components:{
    latticeLED,latticeList,
    channelEdit
  },
  methods:{
     callback(key) {
      console.log(key);
      if(key==1){
        this.$refs.latticeLED.getListData()
      }else if(key==2){
        //需要加上this.$nextTick，否则在第一次点击第二个或第三个选项卡时页面会报错，目的是确保DOM 更新完成后调用getListData()方法
        this.$nextTick( () => {
          this.$refs.latticeList.getListData()
        })
      }else if(key==3){
        //需要加上this.$nextTick，否则在第一次点击第二个或第三个选项卡时页面会报错，目的是确保DOM 更新完成后调用getListData()方法
        this.$nextTick( () => {
          this.$refs.channelEdit.getListData()
        })
      }
    },
  }

}
</script>

<style>

</style>